<template>
    <div class="Notes">
        <!-- 按钮 -->
     <div class="btns">
        <el-button size="small" type="primary"  round>查询</el-button>
          <el-button size="small" type="success"  @click="toAdd" round>添加</el-button>
    </div>
        <!-- 表格 -->
        
        <el-table
    :data="list" stripe    style="width: 100%">
    <el-table-column      prop="id"         label="ID"         width="180"></el-table-column>
    <el-table-column      prop="title"      label="文章"       width="180"></el-table-column>
    <el-table-column      prop="content"    label="目录"       width="180"></el-table-column>
    <el-table-column      prop="type"       label="类型"       width="180"></el-table-column>
    <el-table-column      prop="status"     label="心情"       width="180"></el-table-column>
    <el-table-column      prop="userid"    label="用户名"      width="180"></el-table-column>
     <el-table-column   label="操作">

       <template v-slot="scope">
         <el-button size="small" type="denger" @click="del(scope.row)">删除</el-button>
          <el-button size="small" type="primary" @click="edit(scope.row)">修改</el-button>
       </template>
</el-table-column>
  </el-table>

    <!-- 模态框 -->

  <el-dialog title="提示"
   class="customer_modal" 
    :visible.sync="dialogVisible"
    width="60%" >

    
    <el-form :model="form"  label-width="100px" >

    <el-form-item label="文章"  >
      <el-input v-model="form.title" ></el-input>
    </el-form-item>
    <el-form-item label="目录"  >
      <el-input v-model="form.content" ></el-input>
    </el-form-item>
    <el-form-item label="内容类型"  >
      <el-input v-model="form.type" ></el-input>
    </el-form-item>
    <el-form-item label="心情"  >
      <el-input v-model="form.status" ></el-input>
    </el-form-item>
    <el-form-item label="用户名称"  >
      <el-input v-model="form.user_id" ></el-input>
    </el-form-item>
  </el-form>
    
      <span slot="footer" class="dialog-footer">
      <el-button  @click="dialogVisible  = false" size="small">取 消</el-button>
      <el-button type="primary" @click="save" size="small">确 定</el-button>
      </span>
    </el-dialog>
    </div>
</template>

<script>
//导入request，浏览器提供给我们的用于与后台进行交互的工具 api
import {get, post} from'@/utils/request'
export default {
    data(){
    return {
      form:{},
      list:[],
      dialogVisible:false
    }
  },
  created(){
this.loadData();
  },
  methods:{
  // 保存
  save(){
      let url = "/notes/saveOrUpdate"
      get(url,this.form).then( (response)=>{
        // 1. 模态框关闭
        this.dialogVisible = false;
        // 2. 提示
        this.$message({type:"success",message:response.message});
        // 3. 刷新
        this.loadData();
      } )
    },
//删除
del(row){
  let url ="/notes/deleteById"
  post(url ,{id:row.id}).then((response)=>{
    //1.提示
    this.$message({type:"success",message:response.message})
    //2.刷新
    this.loadData();
  })

},
//编辑
    edit(row){
      this.form = row;
      this.dialogVisible = true;
    },
    //加载数据
    loadData(){
      let url="/notes/findAll";
      get(url).then( (response)=>{
         //response就是后端返回给我们的Message{status,message,data,timetamp}
      this.list=response.data;
      });
    },
     toAdd(){
      this.dialogVisible = true;
    }
  }
  
}
</script>



<style scoped>
 
</style>